<template>
	<body-wrap>
		<view class="hearderImg">
			<!-- <image @click="goPage" v-if="userInfo._id" class="imgbox" :src="userInfo.avatar" mode="aspectFill"/> -->
			<cm-image @click.native="goPage" v-if="userInfo._id" :src="userInfo.avatar"/>
			<view v-else class="txt" @click="goLogin">
				<view>登陆</view>
			</view>
		</view>
		<view class="name">{{userInfo.name || userInfo.nickname}}</view>
		<view class="homeIndexMain">
			<view class="mList">
				<!-- <navigator class="mLi" url="pages/home/message/message">
					<view class="label">系统消息<text class="rnum">5</text></view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator> -->
				
				<navigator  v-if="userInfo.type==1" class="mLi" url="/pages/home/teacher/customBook/index">
					<view class="label">客户预约</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<!-- 客户在线咨询，指定该教师回复的问题 -->
				<navigator  v-if="userInfo.type==1" class="mLi" url="/pages/home/teacher/customQa/index">
					<view class="label">客户咨询</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/consult/consult">
					<view class="label">我的预约</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/ask/ask">
					<view class="label">我的问答</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/follow/follow">
					<view class="label">我的关注</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/collect/collect">
					<view class="label">我的收藏</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/package/index">
					<view class="label">我的咨询包</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<!-- <navigator class="mLi" url="/pages/index/index">
					<view class="label">我的评论</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator> -->
				<navigator class="mLi" url="/pages/home/apply/apply">
					<view class="label">成为专家</view>
					<view class="imgbox">
						<cm-image src="static/images/xjt.png"/>
					</view>
				</navigator>
				<!---以下只有教师才会有-->
				<template v-if="userInfo.type==1">
					<navigator class="mLi" url="/pages/home/consult/sendList">
						<view class="label">我发布的预约</view>
						<view class="imgbox">
							<cm-image src="static/images/xjt.png"/>
						</view>
					</navigator>
				</template>
				<!---end-->
				<button @click="sendMsg4">发送EJ公众号模板消息</button>
				
			</view>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import cmImage from "@/components/cmImage/index.vue"
	import {getUserInfo,sendTemplateMsg} from '@/api/base.js'
	export default defineComponent({
		components:{
			bodyWrap,
			cmImage
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
			})
			
			// onLoad(async options=>{
			// 	const res = await getUserInfo(state.userInfo._id)
			// 	if(res.code == 200){
			// 		let tmp = res.data
			// 		if(tmp.openid) { // 删除openid，可能是EJ在线公众号的openid
			// 			delete tmp.openid
			// 		}
			// 		store.commit('base/set_userInfo',tmp)
			// 	}
			// })
			
			onMounted(async ()=>{
				const res = await getUserInfo(state.userInfo._id)
				if(res.code == 200){
					let tmp = res.data
					if(tmp.openid) { // 删除openid，可能是EJ在线公众号的openid
						delete tmp.openid
					}
					store.commit('base/set_userInfo',tmp)
				}
			})
			
			const goPage = ()=>{
				// uni.navigateTo({
				// 	url:'/pages/home/userInfo/userInfo'
				// })
			}
			
			const goLogin = ()=>{
				
			}
			
			const sendMsg = ()=>{
				sendTemplateMsg({
					from:'EJOnline',  // EJ在线公众号
					url:'http://mobile.ej12366.video/course/62d60fa54e67342a62b49e5b',
					tid:'NcLGfgcovNLbFky0ZAXBGgYsWAHhBRHt-hQLnhTnQRE',
					dataObj:{
							"first": {
								"value":'某某，您好。您购买的课程即将开课，请务必及时报到',
								"color":"#717171"
							},
							"keyword1":{
								"value":' 企业IPO涉税事项实务指引系列沙龙-IPO关注的主要涉税问题解析',
								"color":"#000000"
							},
							"keyword2": {
								"value":'2024年05月05日',
								"color":"#000000"
							},
							"keyword3": {
								"value":'重庆蓝湖郡',
								"color":"#000000"
							},
							"keyword4": {
								"value":'18700000001',
								"color":"#000000"
							},
							"remark":{
								"value":'如有疑问，请及时与我们取得联系',
								"color":"#479ade"
							}
					}
				})
			}
			
			const sendMsg2 = async ()=>{
				const res = await getUserInfo(state.userInfo._id)
				if(!res.data || !res.data.openid){
					return
				}
				sendTemplateMsg({
					openId:res.data.openid, // EJ在线公众号openId
					from:'EJOnline',  // EJ在线公众号
					url:'http://mobile.ej12366.video/course/62d60fa54e67342a62b49e5b',
					tid:'yZbn1gKUMUeLzN4lra8xI3tlzYz4K1FFaQjM486oQ8Q',
					dataObj:{
							"thing17": {
								"value":'张某某',
								"color":"#717171"
							},
							"thing3":{
								"value":'IPO关注的主要涉税问题解析？',
								"color":"#000000"
							},
							"phone_number8": {
								"value":'18700000001',
								"color":"#000000"
							}
					}
				})
			}
			const sendMsg3 = async ()=>{
				const res = await getUserInfo(state.userInfo._id)
				if(!res.data || !res.data.openid){
					return
				}
				sendTemplateMsg({
					openId:res.data.openid, // EJ在线公众号openId
					from:'EJOnline',  // EJ在线公众号
					url:'http://mobile.ej12366.video/course/62d60fa54e67342a62b49e5b',
					tid:'5GIjCyVxYYxVwZeslfZLm41LyPRhDmZc1JzWoaEbeGU',
					dataObj:{
							"phrase19":{
								"value":'系统管理',
								"color":"#000000"
							},
							"phrase14": {
								"value":'专家姓名',
								"color":"#717171"
							},
							"time6": {
								"value":'2024-03-08 12:00:00',
								"color":"#000000"
							}
					}
				})
			}
			
			const sendMsg4 = async ()=>{
				const res = await getUserInfo(state.userInfo._id)
				if(!res.data || !res.data.openid){
					return
				}
				sendTemplateMsg({
					openId:res.data.openid, // EJ在线公众号openId
					from:'EJOnline',  // EJ在线公众号
					//url:'http://mobile.ej12366.video/course/62d60fa54e67342a62b49e5b',
					tid:'yZbn1gKUMUeLzN4lra8xI3tlzYz4K1FFaQjM486oQ8Q',
					miniprogram:{
					 "appid":"wx3888dcb2e4d147a7",  // 小程序appid
					 "pagepath":"pages/home/order/order"
				    },
					dataObj:{
							"thing17": {
								"value":'张某某',
								"color":"#717171"
							},
							"thing3":{
								"value":'IPO关注的主要涉税问题解析？',
								"color":"#000000"
							},
							"phone_number8": {
								"value":'18700000001',
								"color":"#000000"
							}
					}
				})
			}
			
			return {
				...toRefs(state),
				goPage,
				goLogin,
				sendMsg,
				sendMsg2,
				sendMsg3,
				sendMsg4
			}
		}
	})
</script>

<style lang="scss" scoped>
	.hearderImg{
		display: block;
		width: 180rpx;
		height: 180rpx;
		margin: 30rpx auto 0 auto;
		border-radius:50% ;
		overflow: hidden;
		background-color: #bb740d;
		.imgbox{
			display: block;
			width: 100%;
			height: 100%;
		}
		.txt{
			text-align: center;
			line-height: 180rpx;
			font-size: 38rpx;
			padding: 0;
			color: #fff;
		}
	}
	.name{
		text-align: center;
		font-size: 34rpx;
		padding: 20rpx 0;
	}
	.homeIndexMain{
		padding: 30rpx;
		.mList{
			.mLi{
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				background: #fff;
				border-radius:20rpx ;
				font-size: 32rpx;
				padding: 0 20rpx 0 30rpx;
				margin: 0 0 40rpx 0;
				.label{
					flex: 1;
					display: flex;
					align-items: center;
					.rnum{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 35rpx;
						height: 35rpx;
						color: #fff;
						border-radius: 50%;
						font-size: 22rpx;
						background: #cc0000;
					}
				}
				.imgbox{
					width: 50rpx;
					height: 50rpx;
					transform: rotate(-90deg);
					-webkit-transform: rotate(-90deg);
					margin: 30rpx 0 0 0;
					.icon{
						display: block;
						width:100%;
						height: 100%;
						opacity: 0.5;
					}
				}
			}
		}
	}
</style>
